<template>
  <div class="shops-head">
    <div class="fx shops-head-coty">
      <span :style="{ color: size_color }">
        {{ address }}
      </span>
      <van-icon name="arrow-down" :color="size_color" />
    </div>
    <van-search readonly placeholder="请输入搜索关键词" />
    <div
      class="fx shops-head-icon"
      v-if="header_iconList && header_iconList.length > 0"
    >
      <div v-for="(item, i) in header_iconList" :key="i">
        <van-icon :name="item.piclink"></van-icon>
      </div>
    </div>
  </div>
</template>

<script>
import { Search, Tab, Tabs, Icon } from "vant";
export default {
  name: "",
  props: {
    dia_show: {
      type: Boolean,
      default: false,
    },
    paramsCity: {
      type: Object,
      default: () => {},
    },
    placeholder: {
      type: String,
      default: "请输入店铺名",
    },
    size_color: [String],
    size_color1: [String],
    header_iconList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      address: "福州市",
      active: 0,
      cateList: [],
      show: false,
      params: {
        province: "",
        city: "",
        area: "",
      },
      search: "",
    };
  },

  components: {
    // eslint-disable-next-line vue/no-unused-components
    [Search.name]: Search,
    // eslint-disable-next-line vue/no-unused-components
    [Tab.name]: Tab,
    // eslint-disable-next-line vue/no-unused-components
    [Tabs.name]: Tabs,
    // eslint-disable-next-line vue/no-unused-components
    [Icon.name]: Icon,
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang='less' scoped>
.shops-head {
  position: relative;
  width: 100%;
  height: 46px;
  display: flex;
  z-index: 10;
  padding: 0 14px;

  .shops-head-coty {
    height: 46px;
    padding: 5px 0;
    margin-right: 10px;
    > span {
      color: #fff;
      font-weight: bold;
      font-size: 17px;
      text-align: center;
    }
    .van-icon {
      font-size: 12px;
      margin-left: 4px;
      margin-bottom: 3px;
      font-weight: bold;
    }
  }

  .van-search {
    flex: 1;
    padding: 5px 0;
    background: transparent;
    .van-search__content {
      border-radius: 8px;
    }
  }

  .shops-head-icon {
    height: 46px;
    padding: 5px 0;
    .van-icon {
      font-size: 24px;
      // font-weight: bold;
      margin-left: 10px;
    }
  }
}
</style>
